<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="home">
    <!-- 二级路由出口 -->
    <RouterView />

    <footer>
      <RouterLink to="/home" active-class="active">
        <van-icon name="home-o" />
        <p>首页</p>
      </RouterLink>

      <RouterLink to="/my" active-class="active">
        <van-icon name="contact-o" />
        <p>我的</p>
      </RouterLink>
    </footer>
  </div>
</template>

<style lang="less">
@import './static/less/variable.less';

.home {
  // 内补白
  padding-bottom: 75px;

  footer {
    width: 100%;
    height: 60px;
    background-color: #f0f0f0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    border-top: 1px solid #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;

    a {
      text-align: center;
      font-size: 18px;
      transition: all .25s;

      &.active {
        color: @activeColor;
      }
    }
  }
}
</style>